<template>
	<view class="group-boking__-content">
		<view class="head-bg">
		</view>
		<view class="head-title">爆款推荐</view>
		<scroll-view scroll-y="true" class="commodity-content">
			<view class="citem" v-for="(item,index) in GroupGoods">
				<show-commodity @event="buyCommodity" :title="item.goods_name" :classify="item.goods_subname"
				 :src="item.mainImg" soldPercent="58" :price="item.price" :oldPrice="item.original_price" :id="item.unid" :sellCount="100" :people="222"></show-commodity>
			</view>
		<view class="no-more">
			—— 没有更多了 ——
		</view>
		</scroll-view>
		<floating-ball @event="handelFloatBall"></floating-ball>
	</view>
</template>

<script>
	import showCommodity from './components/group-boking-commodity-show.vue'
	import floatingBall from '../../components/floating-ball-menu/floating-ball-menu.vue'
	import util from "@/common/util.js";
	export default {
		components: {
			showCommodity,
			floatingBall
		},
		data() {
			return {
				headTapIndex: 1, //头部选项卡
				commodityList: [], //商品列表
				showNoMore: false, //是否还有更多商品
				GroupGoods: [], //拼团商品
			}
		},
		// 触底事件
		onReachBottom() {
			this.showNoMore = !this.showNoMore
			console.log(this.showNoMore);
		},
		created() {
			this.GroupGoodsDK()
		},
		methods: {
			getGroupBoking() {
				if (this.headTapIndex == 0) {
					console.log('更新已结束限时秒杀商品');
				} else if (this.headTapIndex == 1) {
					console.log('更新限时秒杀商品');
				} else {
					console.log('更新即将开始限时秒杀商品');
				}
			},
			// 立即抢购
			buyCommodity(e) {
				this.$interface.routeLink({
					route: 'teamDetail',
					data: {
						id: e
					}
				})
			},
			// 悬浮球菜单
			handelFloatBall(e) {
				console.log(e);
			},
			// 拼团商品
			GroupGoodsDK(){
				let resData = {
					activities:3
				}
				this.$shopApi.apiPost('font/goods/infos').then(res => {
					const DATA = res.data
					if(DATA.code == 200){
						/* this.util.mainImages(DATA) */
						if(DATA.data.list!=undefined){
							for (var i = 0; i < DATA.data.list.length; i++) {
								if(DATA.data.list[i].images.length!=0){
									DATA.data.list[i].mainImg = this.util.getMainImage(DATA.data.list[i].images)
								}else{
									DATA.data.list[i].mainImg = this.defimg
								}
							}
						}
						console.log(DATA.data.list);
						this.GroupGoods = DATA.data.list
						console.log('GroupGoods',this.GroupGoods);
					}
				})
			},
		},
		watch: {
			// 监听头部选项卡
			headTapIndex() {
				this.commodityList = []
				this.getGroupBoking()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FAFAFA;
	}

	.group-boking__-content {

		.head-bg {
			position: fixed;
			width: 100%;
			height: 372upx;
			background: linear-gradient(125deg, #FF4A00 0%, #FF6F00 48%, #FF0000 100%);
			opacity: 1;
			z-index: 1;
			top: 0;
		}

		.head-title {
			position: fixed;
			width: 100%;
			height: 118upx;
			background: linear-gradient(125deg, #FF4A00 0%, #FF6F00 48%, #FF0000 100%);
			line-height: 118upx;
			z-index: 1;
			top: 0;
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 1;
			padding-left: 30upx;
		}

		.commodity-content {
			position: relative;
			z-index: 2;
			top: 0;
			width: calc(100% - 60upx);
			height: calc(100vh - 118upx);
			margin: auto;
			margin-top: 118upx;
			background-color: #FAFAFA;
			box-sizing: border-box;
			border-radius: 20upx;
			overflow-x: hidden;
			
			.citem {
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 32upx 22upx 24upx 22upx;
				margin-bottom: 20upx;
			}
		}

		.no-more {
			width: 100%;
			height: 90upx;
			line-height: 90upx;
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			opacity: 1;
			text-align: center;
		}
	}
</style>
